<template>
	<div class="gobang-invite">
		<el-dialog v-model="dialogInviteVisible" title="人员列表" width="300px" height="300px">
			<div class="gobang-invite-seach">
				<el-input v-model="userValue" placeholder="请输入用户昵称" @input="seachInput" />
			</div>
		    <div class="gobang-invite-list">
				<div class="gobang-invite-list-group" v-for="item in data.userData" v-show="item?.account!==store.state.userInfoX.account">
					<span><img :src="item?.avatar?item.avatar:''" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}" /></span>
					<strong>{{item?.nickName}}<b v-show="item.grade"> - {{item.grade}}</b></strong>
					<button :disabled="item?.is_line == 0 || item?.is_line == 2 || item?.is_line == 4" :style="{'background':item?.is_line == 1?'':item?.is_line == 2?'rgb(216, 30, 6)':'#aaa'}"  @click="debounce((item)=>{inviteButtonClick(item)},500)(item)">{{item?.is_line == 1?'邀请':item?.is_line == 2?'游戏中':item?.is_line == 4?'队伍中':'离线'}}</button>
				</div>
				<div v-show="data.userData.length === 0" class="gobang-invite-list-bottom">暂无人员数据</div>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref,onMounted,reactive,inject,onBeforeUnmount,watch } from 'vue'
	import bus from '../../public/bus'
	import {HttpPersonalList,HttpGameRecord,HttpGameTotalRecord,HttpAlterScore,HttpGetOtherinfo} from '../../public/http'
	import {debounce,defaluteImg,gradeTotal} from '../../public/common'
	import { ElMessage,ElMessageBox} from 'element-plus'
	const store = inject('store')
	let dialogInviteVisible = ref<boolean>(false) 
	let userValue = ref<string>("")
	let data = reactive({
		userData:[],
	})
	// 用户列表
	const userMain = (v)=>{
		HttpPersonalList('all',{
			key_word:userValue.value
		}).then((res:any)=>{
			if(res.code === 200){
				data.userData = res.data.userData
				topMain()
				if(v === 1){
					data.userData.forEach(async (r,i)=>{
						r.grade = "若禺"
						r.grade = await gameTotalMain(3,r.account,r.gomoku_score?r.gomoku_score:0)
					})
				}else{
					v?.forEach((s)=>{
						data.userData.forEach(async (r,i)=>{
							if(r.account === s.from){
								r.is_line = 4
							}
						})
					})
				}
			}
		})
	}
	bus.on('hideUserList',()=>{
		dialogInviteVisible.value = false
	})
	bus.on('openUserList',(v)=>{
		userMain(v)
		dialogInviteVisible.value = true
	})
	// 刷新
	bus.on('update',(e)=>{
		if(dialogInviteVisible.value){
			for(let i = 0;i < data.userData.length;i++){
				if(data.userData[i].account == e.user){
					data.userData[i].is_line = e.type
					topMain()
					break
				}
			}
		}
	})
	// 刷新
	bus.on('game',(e)=>{
		if(dialogInviteVisible.value){
			for(let i = 0;i < data.userData.length;i++){
				if(data.userData[i].account == e.user[0] || data.userData[i].account == e.user[1]){
					data.userData[i].is_line = e.type
					topMain()
					break
				}
			}
		}
	})
	// 刷新
	bus.on('playing',(e)=>{
		if(dialogInviteVisible.value){
			for(let i = 0;i < data.userData.length;i++){
				if(data.userData[i].account == e.user){
					data.userData[i].is_line = e.type
					topMain()
					setTimeout(()=>{
						ElMessage({
							message: '对方游戏中...',
							type: 'warning',
						})
					},2000)
					break
				}
			}
		}
	})
	// 置顶元素
	const topMain = ()=>{
		data.userData.forEach((item,index) => {
		   if(item.is_line == 1 || item.is_line == 2){
		      data.userData.unshift(data.userData.splice(index , 1)[0]);
			 
		   }
		})
	}
	// 计算分数
	const gameTotalMain = async (type,account,total)=>{
		return gradeTotal(total)
	}
	// 点击邀请
	const inviteButtonClick = async (item)=>{
		let result = await HttpGetOtherinfo({email:item.account})
		if(!result?.data?.landlord_pulse || Number(result?.data?.landlord_pulse) < 100){
			ElMessage({
				message: '对方金币不足100，无法参与游戏',
				type: 'warning',
			})
			return
		}
		bus.emit('inviteClick',JSON.stringify(item))
	}
	
	// 监听用户搜索
	const seachInput = (e)=>{
		if(data.isScroll){
			clearInterval(data.isScroll)
		}
		data.isScroll = setTimeout(()=>{
			userMain()
		},500)
	}
	onMounted(()=>{
		userMain()
	})
	onBeforeUnmount(()=>{
		bus.off('openUserList')
		bus.off('hideUserList')
	})
	
</script>

<style lang="scss">
	.gobang-invite{
		position: absolute;
		left: 100px;
		top: 30%;
		right: 0;
		margin: auto;
		:deep(.el-dialog__body){
			padding: 10px 20px 15px 20px;
		}
		.gobang-invite-seach{
			margin-bottom: 10px;
		}
		.gobang-invite-list{
			height: 300px;
			overflow: auto;
			.gobang-invite-list-bottom{
				font-size: 13px;
				color: #aaa;
				text-align: center;
				padding: 10px;
			}
			.gobang-invite-list-group{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 5px;
				border-bottom: 1px solid #eee;
				padding: 10px 0;
				span{
					display: inline-block;
					width: 20px;
					height: 20px;
					border-radius: 60%;
					overflow: hidden;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				strong{
					font-size: 14px;
					color: #000000;
					margin: 0 20px 0 3px;
					width: calc(100% - 90px);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					b{
						color: rgb(249, 171, 8);
						font-family: cursive;
					}
				}
				button{
					padding: 3px 5px;
					font-size: 12px;
					background-color: rgb(249, 171, 8);
					color: white;
					border-radius: 5px;
					border: 0;
					cursor: pointer;
					outline: none;
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
		
	}
</style>
